
// webpack开发环境 : 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
// fs模块之中有一个 readdirSync( 文件目录 ) 可以获取当前目录的所有文件夹名; 可以简化配置信息; 

module.exports = {
      // entry : 入口信息配置, 要求填写字符串格式的路径信息; 
      entry : {
            "index" : "./src/index/entry.js",
            "list"  : "./src/list/entry.js",
            "cart"  : "./src/cart/entry.js",
            "detail"  : "./src/detail/entry.js",
            "login"  : "./src/login/entry.js",
            "register" : "./src/register/entry.js"
      },
      // mode 属性配置 : 
      // "development" : 开发环境不进行代码压缩, webpack 有一套设置针对环境经; 
      // "production" : 生产环境进行代码压缩。 
      mode : "development",
      // 因为我们编译的代码是压缩之后的index.js 文件里面的代码我们并不知道源码对应的位置是哪里，不利于代码调试，所以我们增加 devtool选项, 生成 .map 文件指明当前执行代码在源码之中的位置; 
      devtool : 'source-map',
      // 更改文件名 : 
      output : {
            // 输出文件路径必须是绝对路径，所以我们使用path模块对路径进行拼接; 
            path: path.resolve(__dirname, 'dist'),
            // 输出的文件名; 
            filename: 'javascripts/[name].js'
      },
      // loader配置 : 
      module : {
            rules : [
                  {
                        test : /\.css$/,  
                        use : [
                              "style-loader",
                              "css-loader"
                        ]
                  },
                  {
                        test : /\.s(c|a)ss$/,
                        use : [
                              "style-loader",
                              "css-loader",
                              "sass-loader"
                        ]
                  },
                  {
                        test : /\.html$/,
                        use : ["html-loader"]
                  },

                  // 如果loader需要额外配置我们就不能以数组的形式传递loader了, 我们需要以对象的形式传递loader;
                  {
                        test :  /\.(jpg|png|gif)$/,
                        loader :"url-loader",
                        options: {
                              // 尺寸分界线, 这个尺寸一下的转换成 base64 编码, 这个尺寸以上的转换成文件
                              // 单位是 b
                              limit: 1024 * 24,
                              // 大于 limit 尺寸的给你编译成文件, 存储的名称
                              // [hash] 表示随机名称
                              // [ext] 表示原始文件后缀名
                              name: 'images/[hash].[ext]',
                              esModule: false,
                         },
                         type: 'javascript/auto'
                  },
            ]
      },
      // 放插件的地方 : 
      plugins : [
            new webpack.ProgressPlugin(),
            new webpack.ProvidePlugin({
                  $ : "jquery",
                  axios : "axios",
            }),
            new HtmlWebpackPlugin( {
                  // filename : "test.html",
                  // 依据哪个html结构为范本建立html; 
                  template : "./src/index/index.html",
                  // 设置js文件插入位置 : 
                  inject : "body",
                  filename : "index.html",
                  chunks : ["index"]
            } ),
            new HtmlWebpackPlugin( {
                  // 依据哪个html结构为范本建立html; 
                  template : "./src/list/list.html",
                  // 设置js文件插入位置 : 
                  inject : "body",
                  filename : "list.html",
                  // chunks : ["index","list"]
                  chunks : ["list"]
            } ),
            new HtmlWebpackPlugin( {
                  // 依据哪个html结构为范本建立html; 
                  template : "./src/cart/cart.html",
                  // 设置js文件插入位置 : 
                  inject : "body",
                  filename : "cart.html",
                  // chunks : ["index","list"]
                  chunks : ["cart"]
            } ),
            new HtmlWebpackPlugin( {
                  // 依据哪个html结构为范本建立html; 
                  template : "./src/login/login.html",
                  // 设置js文件插入位置 : 
                  inject : "body",
                  filename : "login.html",
                  chunks : ["login"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/register/register.html",
                  // 设置js文件插入位置 : 
                  inject : "body",
                  filename : "register.html",
                  chunks : ["register"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/detail/detail.html",
                  inject : "body",
                  filename : "detail.html",
                  // chunks : ["index","list"]
                  chunks : ["detail"]
            } )
      ],
      // 服务器配置 : 
      devServer: {
            host : "localhost",
            port: 9000,
            hot: true
      },
}

